<template>
        <div>
            <div class="hot" v-show="this.RatedMovies.length!=0 && this.MoviesInfoList.length!=0">
                <recommend :movielist="RatedMovies" :title="Title"></recommend>
                <movie-list :moviesinfo=" MoviesInfoList"></movie-list>
            </div>

            <!-- loading -->
            <van-loading size="30px"  v-show="this.RatedMovies.length==0 && this.MoviesInfoList.length==0" color="#f03d37">加载中...</van-loading>
        </div>
 
</template>


<script>
// 引入组件
import Recommend from '@/components/Recommend.vue'
import MovieList from '@/components/MovieList.vue'
export default {
    data(){
        return{
            RatedMovies:[],
            Title:'',
            MoviesInfoList:[]
        }
    },
    created(){
        this.getRatedMovies()
        this.getMoviesInfoList()
    },
    methods:{
        // 获取最受好评电影的前六条数据
        async getRatedMovies(){
            let res=await this.axios.get('index/topRatedMovies')
            // console.log(res)
            this.RatedMovies=res.movieList
            this.Title=res.title
        },
        // 获取热映列表
        async getMoviesInfoList(){
            let res=await this.axios.get('index/movieOnInfoList')
            // console.log(res)
            this.MoviesInfoList=res.movieList
        },
    },
    // 注册组件
    components:{
        Recommend,
        MovieList
    },
}
</script>

<style lang="less" scoped>
/deep/ .van-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  // transform: translateY(-50%);
}
.hot{
    margin-top: 96px;
    margin-bottom: 48px;
}
</style>